<template>
  <view :class="[componentName == 'u-textarea' ? 'component-wrap componentBg' : 'component-wrap']">
    <u-input v-if="componentName == 'u-input'" border="none" :type="type" :value="valueData" :placeholder="placeholder" @input="handleInput" @change="handleChange" @blur="handleBlur"></u-input>
    <u-textarea v-if="componentName == 'u-textarea'" border="none" :value="valueData" :placeholder="placeholder" @input="handleInput"></u-textarea>
    <u-radio-group
        v-if="componentName == 'u-radio'"
        :value="valueData"
        :placement="placement"
        @change="handleChange"
    >
      <u-radio
          :customStyle="{marginBottom: '8px'}"
          v-for="(item, index) in children"
          :key="index"
          :label="item.label"
          :name="item.name"
          :disabled="item.disabled || false"
          activeColor="#d5ad57"
      >
      </u-radio>
    </u-radio-group>
    <view v-if="componentName == 'u-action'">
      <view class="picker" @click="handlePicker">{{actionData}}</view>
      <u-action-sheet :show="showFlag" :actions="children" title="请选择" @close="showFlag = false" @select="handleSelectChange">
      </u-action-sheet>
    </view>
    <upload v-if="componentName == 'u-upload'" @change="handleUploadChange"/>

  </view>
</template>

<script>
import upload from "../upload";
export default {
  name: "custom-component",
  props: {
    componentName: {
      type: String,
      default: 'u-input'
    },
    type: {
      type: String,
      default: 'text'
    },
    valueData: {
      type: [String, Number, Array],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    children: {
      type: Array,
      default() {
        return []
      }
    },
    placement: {
      type: String,
      default: 'column'
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showFlag: false,
      actionData: ''
    }
  },
  mounted() {
    this.showFlag = this.show
    if(this.componentName == 'u-action') {
      this.actionData = this.children.find(item => item.value == this.valueData)?.name
    }

  },
  methods: {
    handleInput(val) {
      this.$emit('input',this.name, val)
      uni.$u.formValidate(this, "input");
    },
    handleChange(val) {
      this.$emit('change',this.name, val)
      uni.$u.formValidate(this, "change");
    },
    handleBlur(val) {
      this.$emit('blur',this.name, val)
      uni.$u.formValidate(this, "blur");
    },
    handlePicker() {
      this.showFlag = !this.showFlag
    },
    handleSelectChange(val) {
      this.$emit('change',this.name, val?.value)
      this.actionData = val?.name
      uni.$u.formValidate(this, "change");
    },
    handleUploadChange(val) {
      this.$emit('change',this.name, val)
      uni.$u.formValidate(this, "change", val);
    }
  },
  watch: {
    show(val) {
      this.showFlag = val
    }
  },
  components: {
    upload
  },
}
</script>

<style scoped>
.component-wrap {
  width: 100%;
  height: auto;
}
.componentBg {
  width: 100%;
  min-height: 80rpx;
  height: auto;
  background-color: #efefef;
  box-sizing: border-box;
}
.picker {
  width: 100%;
  height: 80rpx;
  background-color: #efefef;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}
</style>